<template>
    <SearchTable
      :columns="columns"
      :data="list"
      :total="total"
      :page="page.pageIndex"
      :size.sync="page.pageSize"
      @change-page="changePage"
      @change-size="changePageSize"
    >
      <template slot="select-group">
        <Select filterable
          v-model="page.name"
          placeholder="请选择题目"
          @on-change="getQuestionSolveList"
          clearable
          style="width: 150px; margin-bottom: 10px"
        >
          <Option
            v-for="item in allTargetList"
            :value="item.name"
            :key="item.id"
            :title="item.name"
            >{{ item.name }}</Option
          >
        </Select>
      </template>

    <Modal v-model="showModal"  width="800" :title="title" footer-hide  @on-cancel="cancel">
      <Select filterable
        v-model="teamName"
        placeholder="请选择团队"
        filterable
        clearable
        @on-change="getQuestionSolveStatic"
        style="width: 150px; margin-bottom: 10px"
      >
        <Option
          v-for="item in accessGroupList"
          :value="item.teamId"
          :key="item.userId"
          :title="item.teamName"
          >{{ item.teamName }}</Option
        >
      </Select>
      <Table border :columns="staticColumns" :data="staticList"></Table>
      <Page
        :total="staticTotal"
        :current="staticCurrentPage"
        :page-size="staticPageSize"
        show-total
        show-elevator
        class="page"
        @on-change="staticChangePage"
        @on-page-size-change="staticChangePageSize"
      ></Page>
    </Modal>
  </SearchTable>
</template>

<script>
import SearchTable from "@/components/SearchTable/SearchTable";
import { queryProblemStatistics, getAttackDetail } from "@/api/drill_compete";
export default {
  name: "problemStatistics",
  props: {},
  components: {
    SearchTable
  },
  data() {
    return {
      teamName: "", // 搜索条件， 团队名称
      accessGroupList: [], // 团队列表
      allTargetList: [], // 所有的题目
      questionId: "", // 题目ID
      finishStatus: 0, // 是否完成答题
      showModal: false, // 是否显示模态框
      title: "", // 模态框标题
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
      total: 0, // 总记录数
      list: [], // 题目解答列表
      staticCurrentPage: 1, // 详情页当前页
      staticPageSize: 10, // 详情页分页大小
      staticTotal: 0, // 详情页总记录数
      staticList: [], // 详情页列表
      columns: [
        {
          placement: "top-left",
          title: "题目显示名称",
          key: "name",
          align: "center",
          tooltip: true,
          width: 230,
        },
        {
          title: "攻破成功团队数",
          width: 120,
          key:'attCount',
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  size: "small",
                },
                class: "tag",
                on: {
                  click: () => {
                    this.showModalFn(params.row.id, 1, params.row.name);
                  },
                },
              },
              params.row.attCount
            );
          },
        },
        {
          title: "防守成功团队数",
          width: 120,
          key:'defCount',
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  size: "small",
                },
                class: "tag",
                on: {
                  click: () => {
                    this.showModalFn(params.row.id, 2, params.row.name);
                  },
                },
              },
              params.row.defCount
            );
          },
        },
      ],
      staticColumns: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        name: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.sceneId = this.$route.query.id;
      this.queryProblemStatistics();
      this.getAllTargetList();
    });
  },
  methods: {
    async queryProblemStatistics() {
      const { data } = await queryProblemStatistics(this.sceneId, this.page);
      this.list = data.items;
      this.total = data.total;
    },
    //获取所有题目
    async getAllTargetList() {
      const { data } = await queryProblemStatistics(this.sceneId, this.page);
      this.allTargetList = data.items;
    },
    changePage(val) {
      this.page.pageIndex = val;
      this.queryProblemStatistics();
    },
    changePageSize(val) {
      this.page.pageSize = val;
      this.queryProblemStatistics();
    },
    staticChangePage(val) {},
    staticChangePageSize(val) {},
    getQuestionSolveList() {
      this.queryProblemStatistics();
    },
    // 显示模态框，重置所有数据
    showModalFn(questionId, finishStatus, title) {
      this.showModal = true;
      this.title = title;
      this.questionId = questionId;
      this.finishStatus = finishStatus;
      this.page.name = "";
      this.staticCurrentPage = 1;
      this.staticPageSize = 10;
      if (finishStatus == 1) {
        this.staticColumns = [
          {
            title: "攻破团队名",
            key: "teamName",
          },
          {
            title: "攻破时间",
            key: "createTime",
          },
          {
            title: "得分",
            key: "score",
          },
        ];
      } else if (finishStatus == 2) {
        this.staticColumns = [
          {
            title: "防守团队名",
            key: "teamName",
          },
          {
            title: "攻破时间",
            key: "createTime",
          },
          {
            title: "得分",
            key: "score",
          },
        ];
      }
      this.getAttackDetail(this.sceneId, questionId, {
        type: this.finishStatus,
        pageIndex: this.staticCurrentPage,
        pageSize: this.staticPageSize,
        teamId:''
      });
      this.getAllaccessGroupList();
    },
    async getAttackDetail(sceneId, id, obj) {
      const { data } = await getAttackDetail(sceneId, id, obj);
      this.staticList = data.items
    },
    getAllaccessGroupList() {
      getAttackDetail(this.sceneId, this.questionId, {
        type: this.finishStatus,
        pageIndex: this.staticCurrentPage,
        pageSize: this.staticPageSize,
      })
        .then(({ code, data, message }) => {
          if (code === 1) {
            let { items } = data || {};
            this.staticTotal = data.total;
            this.accessGroupList = items;
          } else {
            this.$Message.warning(message);
          }
        })
        .catch(() => {
          this.$Message.error("获取题目详情异常");
        });
    },
    getQuestionSolveStatic(){
      // const res = this.staticList.filter(item=>item.teamName===this.teamName)
      this.getAttackDetail(this.sceneId, this.questionId, {
        type: this.finishStatus,
        pageIndex: this.staticCurrentPage,
        pageSize: this.staticPageSize,
        teamId: this.teamName
      });
    },
    cancel(){
      this.accessGroupList = []
      this.teamName = ''
    }
  },
};
</script>

<style scoped>
.card-list >>> .tag {
  line-height: 20px;
  background: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}
.page {
  padding: 15px 0;
  text-align: center;
}
</style>